<template>
	<view class="flex flex-col h-full">
		<scroll-view scroll-y="true" class="flex-1">
			<FromList title="标题" align="bottom">
				<uni-easyinput type="text" :inputBorder="true" v-model="postForm.title" placeholder="请输入标题" />
			</FromList>
			<FromList title="内容" align="bottom">
				<view class="editor">
					<sp-editor editorId="editor" ref="editorRef" :toolbar-config="toolbarConfig" :readOnly="readOnly"
						@input="inputOver" @upinImage="upinImage" @upinVideo="upinVideo" @init="initEditor" @overMax="overMax"
						@exportHtml="exportHtml" @addLink="addLink"></sp-editor>
				</view>
			</FromList>
		</scroll-view>
		<view class="pt-30">
			<button type="primary" class="rounded-full" @click="onSave">确定</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		watch,
		computed
	} from 'vue';
	import FromList from '@/components/FromList.vue';
	import {
		convertImgStylesToAttributes,
		handleHtmlWithVideo
	} from '@/uni_modules/sp-editor/utils'
	import communityApi from '@/apis/apiList/communityApi';

	const postForm = ref({
		"postplate.id": 1
	})
	const toolbarConfig = ref({
		// excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],
		iconSize: '20px',
		iconColumns: 10
	})
	const editorRef = ref(null)
	const editorIns = ref(null)
	const mediaQueryOb = ref(null)
	const readOnly = ref(false)

	const emit = defineEmits(['update', 'send'])

	const onSave = () => {
		editorRef.value.exportHtml()
		if (!postForm.value.title) {
			uni.showToast({
				icon: "none",
				title: "请输入标题！"
			})
			return
		}
		if (!postForm.value.content) {
			uni.showToast({
				icon: "none",
				title: "请输入内容！"
			})
			return
		}
		postForm.value.pid = uni.getStorageSync('user').id
		communityApi.addpostinfo(postForm.value).then(res => {
			uni.showToast({
				title: "发帖成功！"
			})
			emit('send')
		})
	}
	/**
	 * 媒体查询 - 响应式处理一些东西
	 */
	const testMediaQueryObserver = () => {
		mediaQueryOb.value = uni.createMediaQueryObserver(this)
		mediaQueryOb.value.observe({
				minWidth: 0, //页面最小宽度 0px
				maxWidth: 500 //页面宽度最大 500px
			},
			(matches) => {
				console.log('==== 开启媒体查询 :', matches)
				if (matches) {
					// 页面宽度在0-500px时
					toolbarConfig.value.iconColumns = 12
				} else {
					toolbarConfig.value.iconColumns = 16
				}
			}
		)
	}
	/**
	 * 获取输入内容
	 * @param {Object} e {html,text} 内容的html文本，和text文本
	 */
	const inputOver = (e) => {
		console.log('==== inputOver :', e)
	}
	/**
	 * 超出最大内容限制
	 * @param {Object} e {html,text} 内容的html文本，和text文本
	 */
	const overMax = (e) => {
		console.log('==== overMax :', e)
	}
	/**
	 * 编辑器就绪
	 * @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法
	 * @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6
	 * @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html
	 */
	const initEditor = (editor) => {
		editorIns.value = editor
		// preRender()
	}
	const preRender = () => {
		uni.showLoading({
			title: '数据加载中...'
		})
		setTimeout(() => {
			const htmlContent =
				`<div><strong>猫猫</strong> <a href="http://www.baidu.com">百度</a>\n<img style="width:100px;height:50px;" src="https://img.yzcdn.cn/vant/cat.jpeg"  />\n<i>yaho</i> giao\n<img width="200px" src="https://img.yzcdn.cn/vant/cat.jpeg"/></div>\n<div><strong>猫猫</strong> <a href="http://www.baidu.com">百度</a>\n<img style="width:100px;height:50px;" src="https://img.yzcdn.cn/vant/cat.jpeg"  />\n<i>yaho</i> giao\n<img width="200px" src="https://img.yzcdn.cn/vant/cat.jpeg"/></div>\n`
			const handleHtml = convertImgStylesToAttributes(htmlContent)
			console.log(handleHtml)
			editorIns.value.setContents({
				html: handleHtml
			})
			uni.hideLoading()
			console.log(editorIns.value)
		}, 1000)
	}
	/**
	 * 直接运行示例工程插入图片无法正常显示的看这里
	 * 因为插件默认采用云端存储图片的方式
	 * 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调
	 * @param {Object} tempFiles
	 * @param {Object} editorCtx
	 */
	const upinImage = (tempFiles, editorCtx) => {
		/**
		 * 本地临时插入图片预览
		 * 注意：这里仅是示例本地图片预览，因为需要将图片先上传到云端，再将图片插入到编辑器中
		 * 正式开发时，还请将此处注释，并解开下面 使用 uniCloud.uploadFile 上传图片的示例方法 的注释
		 * @tutorial https://uniapp.dcloud.net.cn/api/media/editor-context.html#editorcontext-insertimage
		 */

		// #ifndef MP-WEIXIN
		editorCtx.insertImage({
			src: tempFiles[0].path,
			width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
			success: function() {}
		})
		// #endif
	}
	const upinVideo = (tempFilePath, editorCtx) => {
		// 此处tempFilePath为本地视频临时地址，请对接后端接口将视频上传后，获取真实地址，再插入到编辑器中
		// 上传视频，并获取视频真实地址（其实和上面插入图片的步骤差不多）
		const videoUrl = tempFilePath

		// 插入一张图片占位（uni-editor无法直接插入video标签，所以需要以图片占位）
		editorCtx.insertImage({
			src: 'https://img.zcool.cn/community/01055859b8e37fa8012075341db67f.gif',
			width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
			alt: videoUrl, // 携带视频真实地址
			success: () => {}
		})
	}
	/**
	 * 导出
	 * @param {string} e 导出的html内容
	 */
	const exportHtml = (e) => {
		// 若携带视频，需按需导入handleHtmlWithVideo方法处理富文本，再导出
		const temphtml = handleHtmlWithVideo(e)
		console.log(temphtml)
		postForm.value.content = temphtml
		// uni.navigateTo({
		// 	url: '/pages/out/out',
		// 	success(res) {
		// 		res.eventChannel.emit('e-transmit-html', {
		// 			data: temphtml
		// 		})
		// 	}
		// })
	}
	/**
	 * 添加超链接
	 * @param {Object} e { text: '链接描述', href: '链接地址' }
	 */
	const addLink = (e) => {
		console.log('==== addLink :', e)
	}
</script>

<style lang="scss" scoped>
	.editor {
		// height: calc(100% - 100px);
		height: 460px;
		// 吸顶
		position: sticky;
		top: var(--window-top);
		background-color: #ffffff;
		border: 1px solid #eee;
	}
</style>